import {
  Text,
  View,
  ScrollView,
  StyleSheet,
  Image,
  Dimensions,
  ActivityIndicator,
  TouchableOpacity,
} from "react-native";
import Swiper from "react-native-swiper";
import React, { useEffect, useState } from "react";
import axiosApi from "../Api/axios";
import { router } from "expo-router";

export default function TumorHospital() {

  const [data1, setData1] = useState([]); // 轮播图数据
  const [data2, setData2] = useState([]); // 会议报告数据
  const [loading, setLoading] = useState(true); // 加载状态
  // 获取轮播图数据
  const fetchCarouselImages = async () => {
    try {
      const response = await axiosApi.get("/fps/carousel");
      setData1(response.data.carousel);
    } catch (error) {
      console.error("错误原因", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchCarouselImages();

  }, []);


  // 轮播图内容渲染
  const renderCarousel = () => {
    if (loading) {
      return (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color="#007BFF" />
          <Text>Loading...</Text>
        </View>
      );
    }
    if (data1.length === 0) {
      return (
        <View style={styles.errorContainer}>
          <Text>暂无图片</Text>
        </View>
      );
    }
    return (
      <Swiper
        style={styles.wrapper}
        autoplay={true}
        autoplayTimeout={3}
        dotStyle={styles.dot}
        activeDotStyle={styles.activeDot}
      >
        {data1.map((item, index) => (
          <View
            style={styles.slide}
            key={index}

          >
            <Image
              style={styles.slideImage}
              source={{ uri: item.carouselimg }}
            />
          </View>
        ))}
      </Swiper>
    );
  };



  return (
    <View style={styles.container}>
      <ScrollView>
        {renderCarousel()}
        <View style={styles.mdoe}>
          <View>
            <Text style={{ fontSize: 13, fontWeight: 700 }}>会议预告</Text>
          </View>
          <View>
            <Text style={{ color: "#999999" }}>更多 <Text style={{ fontWeight: 700 }}> > </Text> </Text>
          </View>
        </View>
        <View style={styles.eqwe}>
          {
            data1.map((item, index) => {
              return (
                <TouchableOpacity
                  onPress={() => {
                    router.push({
                      pathname: '/YgFile/Preview',
                      params: {
                        name: item.carouseltitle,
                      }
                    })
                  }}
                >
                  <View style={styles.q1}>
                    <Image
                      style={{ width: "30%", height: "100%" }}
                      source={{ uri: item.carouselimg }}
                    ></Image>
                    <View style={{ marginLeft: 5 }}>
                      <Text style={{ fontSize: 12, }}>{item.carouseltitle}</Text>
                      <Text style={{ fontSize: 12, color: "#999999" }}>{item.carouseltitle}国际胃癌大会(IGCC)将于2019年5月8日至11日在捷克布拉格举行。会 (IGCA)主办的两年一届的全球性会议，会议主题涵盖胃癌的基础和转化研究、预防、诊断（含早诊和筛查）、治疗、康复等各个方面。国际胃癌协会(IGC1995年3月2进胃癌的预防、诊断和治疗研究提供一个</Text>
                    </View>
                  </View>
                </TouchableOpacity>

              )
            })
          }
        </View>
        <View style={styles.mdoe}>
          <View>
            <Text style={{ fontSize: 13, fontWeight: 700 }}>会议报道</Text>
          </View>
          <View>
            <Text style={{ color: "#999999" }}>更多 <Text style={{ fontWeight: 700 }}> > </Text> </Text>
          </View>
        </View>
        <View style={styles.eqw1e}>
          {
            data1.map((item, index) => {
              return (
                <View style={styles.q11}>
                  <TouchableOpacity
                    onPress={() => {
                      router.push({
                        pathname: "/YgFile/MeetingShow",
                        params: {
                          name: item.carouseltitle,
                        }
                      })
                    }}
                  >
                    <Image
                      style={{ width: "100%", height: "80%" }}
                      source={{ uri: item.carouselimg }}
                    ></Image>
                  </TouchableOpacity>

                  <Text style={{ fontSize: 12, padding: 10 }}>{item.carouseltitle}</Text>
                </View>
              )
            })
          }
        </View>

      </ScrollView>
    </View>
  )
}

const styles = StyleSheet.create({
  eqwe: {
    width: "100%",
    marginTop: 1,
  },
  eqw1e: {
    width: "50%",
    marginTop: 1,
    flexDirection: "row",
    justifyContent: "space-between",
  },
  q1: {
    width: "100%",
    height: 120,
    padding: 10,
    marginTop: 3,
    backgroundColor: "#FFF",
    flexDirection: "row",
  },
  q11: {
    width: "100%",
    height: 200,
    padding: 10,
    marginTop: 3,
    backgroundColor: "#FFF",

  },
  mdoe: {
    padding: 10,
    flexDirection: "row",
    justifyContent: "space-between",
    width: "100%",
    backgroundColor: "#FFF",
    marginTop: 10,
  },
  container: {
    flex: 1,
    backgroundColor: "#f2f2f2",
  },
  wrapper: {
    height: 200,
  },
  slide: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "transparent",
  },
  slideImage: {
    width: Dimensions.get("window").width,
    height: "100%",
    resizeMode: "cover",
  },
  title: {
    width: Dimensions.get("window").width,
    color: "#000",
    fontSize: 16,
    textAlign: "center",
    backgroundColor: "#FFF",
    paddingHorizontal: 8,
    paddingVertical: 4,
    marginLeft: -9,
    borderRadius: 5,
  },
  dot: {
    backgroundColor: "rgba(255, 255, 255, 0.5)",
    width: 8,
    height: 8,
    borderRadius: 4,
    marginHorizontal: 3,
  },
  activeDot: {
    backgroundColor: "#FFF",
    width: 10,
    height: 10,
    borderRadius: 5,
    marginHorizontal: 3,
  },
  main: {
    width: Dimensions.get("window").width,
    flexDirection: "row",
    height: 200,
    display: "flex",
    justifyContent: "space-around",
    alignItems: "center",
    flexWrap: "wrap",
    backgroundColor: "#FFF",
    marginTop: 40,
  },
  loadingContainer: {
    justifyContent: "center",
    alignItems: "center",
    height: 200,
  },
  errorContainer: {
    justifyContent: "center",
    alignItems: "center",
    height: 200,
  },
  logimg: {
    width: 60,
    height: 60,
    borderRadius: "50%",
    backgroundColor: "#E4E4E4",
    justifyContent: "center",
    alignItems: "center",
    margin: 10,
  },
  imgs: {
    width: 30,
    height: 30,
  },
});
